Conversation
Port the design-token substrate from Recruidea so feature code has real semantic classes instead of raw Tailwind palette values. - styles.css: define light + dark --color-* CSS custom properties in :root / @media (prefers-color-scheme: dark); body now uses bg-surface-base and text-content-primary (var swap handles dark, no more dark: body override) - tailwind.config.js: extend colors with brand / surface / content / border / accent / feedback token groups mapped to the CSS vars - DropZone, PdfPreview, Result: replace every raw palette class (neutral-*, emerald-*, amber-*, red-*) with the semantic equivalent; remove now-redundant dark: variants - CLAUDE.md: update Styling & Tokens examples to match shipped vocab src/App.tsx still carries raw palette classes — out of scope this round. Resolves #23
Vaishnavi1709
approved these changes
Jun 9, 2026
Vaishnavi1709
left a comment
Vaishnavi1709
left a comment
Collaborator
There was a problem hiding this comment.
PR Review: refactor: establish semantic token layer (UI parity round 1)
Summary
Clean substrate swap. Issue #23's full acceptance set is met: light + dark --color-* vars in :root, Tailwind mapping with semantic names that match Recruidea verbatim, in-scope components migrated with dark: pairs collapsed, CLAUDE.md vocab reconciled with the shipped config. CI green. No required changes.
Spec Alignment (issue #23)
| Criterion | Status | Notes |
|---|---|---|
Light + dark --color-* palette in styles.css |
✅ | :root + @media (prefers-color-scheme: dark), brand/surface/content/border/accent/feedback groups |
theme.extend.colors semantic mapping |
✅ | names match Recruidea exactly per the #22 decision |
src/components/{DropZone,PdfPreview,Result}.tsx migrated |
✅ | acceptance grep returns nothing under src/components |
dark: variants removed |
✅ | all collapsed; body var-swap drives dark mode |
| CLAUDE.md vocab matches shipped config | ✅ | bg-surface/text-ink/text-brand-primary → bg-surface-card/text-content-primary/text-brand-amber |
npm run typecheck + npm run build clean |
✅ | CI verify job green |
| Manual light + dark check | ✅ | Playwright, per PR body |
Highlights
- Scope discipline.
src/App.tsx(header alpha pill, intro copy, error banner, footer) is explicitly carved out and called out in the PR body — keeps this round small and the reuse-surface hook still guards against new drift while App.tsx waits its turn. - Doc reconciliation in the same PR. Avoids the trap of shipping tokens but leaving CLAUDE.md naming
bg-surface/text-inkfor the next contributor to be confused by. - Test-plan grep is stricter than the issue's. Adds
emeraldto the disallowed set —StatusPill/CheckPillusedemerald-100/900and would have slipped past the issue's exact regex.
Key Findings
None blocking.
Verdict
Action: APPROVE
Rationale: Issue #23 acceptance criteria are all hit; the token layer is correctly named, correctly wired, and correctly applied to the in-scope components. CI green, scope carve-out for App.tsx explicit, doc and config land in lockstep.
5 tasks
3 tasks
s-annam
added a commit
that referenced
this pull request
Jun 15, 2026
s-annam
added a commit
that referenced
this pull request
Jun 25, 2026
s-annam
added a commit
that referenced
this pull request
Jun 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Round 1 of the UI-parity epic (#22). Ports the design-token substrate from Recruidea so feature code has real semantic classes instead of raw Tailwind palette values.
styles.css— light + dark--color-*CSS custom properties in:root/@media (prefers-color-scheme: dark); body now usesbg-surface-base+text-content-primary(var swap drives dark mode, no moredark:body override)tailwind.config.js—theme.extend.colorswith brand / surface / content / border / accent / feedback groups mapped to the CSS vars (names match Recruidea exactly)DropZone/PdfPreview/Result— every raw palette class replaced with the semantic equivalent; redundantdark:variants removedCLAUDE.md— Styling & Tokens vocab reconciled with the shipped configSubstrate swap only — net visual change ~neutral, no redesign.
src/App.tsxstill carries raw palette classes (out of scope this round).Closes #23
Test plan
grep -rE "(bg|text|border|from|to)-(neutral|gray|slate|red|amber|green|orange|zinc|stone|emerald)-[0-9]" src/componentsreturns nothingnpm run typecheckcleannpm run buildgreen